
<div class="console col-md-4 center">
    <div class="row printer-status-header">
        <button class="btn btn-icon btn-back col-xs-offset-1 pull-left"
                ng-click="goToPage('/printers');">
        </button>
        <div id="printer-name-info">
            <h3 id="printer-title" class="text-center">{{(printer.name)}}</h3>
            <div class="text-center">{{(printer.type_id)?(getDefaultsForType(printer.type_id)['nickname']) : ''}}</div>
        </div>
    </div>

    <div class="row main-box">
        <div class="row display-row">
            <div id="job-status" class="col-xs-3 col-sm-3 col-md-5">
                <h5>Printer Status: </h5>
            </div>
            <div id="job-status-values" class="col-xs-6">
                <h5>{{printer.status.state.charAt(0).toUpperCase() + printer.status.state.slice(1)}}</h5>
            </div>
        </div>
        <div class="row display-row">
            <div class="col-lg-12">
                <div class="progress">
                    <div class="progress-bar"
                         role="progressbar" aria-valuenow="10"
                         ng-class="{'progress-bar progress-bar-striped active': printer.status.state == 'printing',
                               'progress-bar progress-bar-striped': printer.status.state == 'paused'}"
                         aria-valuemin="0" aria-valuemax="100" ng-style="{width: percent + '%'}">
                        <span class="sr-only"></span>
                        <div class="progress-value">{{(percent)? (percent | number: 0) : 0}}%</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row display-row">
            <div class="col-md-4 pull-left col-lg-6">
                <a
                        ng-show="printer.status.state === 'printing' || printer.status.state === 'paused'"
                        class="btn btn-sm btn-md btn-default pull-left"
                        type="button"
                        ng-model="printer.status.state"
                        ng-click="pause_resume_toggle(printer);">
                    {{printer_job_control(printer.status.state)}} Print Job
                </a>
            </div>
            <div class="col-md-4 pull-right col-lg-6">
                <a class="btn btn-default btn-sm btn-md pull-right"
                   type="button"
                   ng-click="cancel(printer);"
                   ng-show="(printer.status.state)? printer_can_cancel(printer): false">Cancel Print Job
                </a>
            </div>
        </div>
        <div class="row display-row">
            <div class="col-lg-12" ng-show="printJobComplete">
                {{jobCompletionMessage}}
            </div>
        </div>
    </div>
    <div class="row footer-box">
    </div>
</div>

